<template>
  <div id="app">
    <Editor v-model="state" />
  </div>
</template>

<script>
import { ElButton, ElInput } from "element-plus";
import { reactive, ref } from "@vue/reactivity";
import { registerConfig } from "./utils";
import "./styles/index.scss";

import data from "./data.json";

import Editor from "./packages/editor";
import { onMounted, provide } from "@vue/runtime-core";

const componentConfig = [
  {
    label: "文本",
    key: "text",
    preview: () => "预览按钮",
    render: () => "渲染按钮",
  },
  {
    label: "按钮",
    key: "button",
    preview: () => <ElButton>预览按钮</ElButton>,
    render: () => <ElButton>渲染按钮</ElButton>,
  },
  {
    label: "输入框",
    key: "input",
    preview: () => <ElInput placeholder="预览输入框" />,
    render: () => <ElInput placeholder="渲染输入框" />,
  },
];

export default {
  name: "App",
  components: {
    Editor,
  },
  setup() {
    const config = reactive(registerConfig);
    provide("config", config);

    const state = ref(data);
    // mock 异步请求
    onMounted(() => {
      setTimeout(() => {
        componentConfig.forEach((item) => {
          registerConfig.register(item);
        });
        config.value = registerConfig;
      }, 100);
    });
    return {
      state,
    };
  },
};
</script>

<style lang="scss">
#app {
  height: 100%;
  width: 100%;
}
</style>
